<template>
  <div class="system-management-container app-container">
    <div class="search-box">
      <TabSearch
        label-width="90px"
        :data="searchData"
        @searchForm="searchForm"
        @resetForm="resetForm"
      />
    </div>
    <div class="list-wrapper" style="flex: 1;">
      <div class="content">
        <div class="title">
         <span>岗位管理</span>
        </div>
        <div class="operation">
          <el-button type="primary"  @click="handleAdd">新增</el-button>
          <!-- <el-button @click="handleEdit">修改</el-button> -->
          <el-button @click="openDelectBox('pk_id')">删除</el-button>
          <el-button @click="openExportBox">导出</el-button>
        </div>
        <comm-table
          ref="dragTable"
          :loading="loading"
          :data="tableData"
          @selectionChange="selectionChange"
          style="width: 100%">
          <el-table-column
            width="80"
            type="selection"
          />
          <el-table-column
            prop="post_code"
            label="岗位编号"
            width="150"
          />
          <el-table-column
            prop="post_name"
            label="岗位名称"
            width="150"
          />
          <el-table-column
            prop="post_sort"
            label="显示顺序"
            width="150"
          />
          <el-table-column
            prop="status"
            label="状态"
            width="150"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status === '0'">正常</span>
              <span v-else-if="scope.row.status === '1'">停用</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            width="200"
          />
          <el-table-column
            label="操作" width="220">
            <template slot-scope="scope">
              <span class="operation-btn" @click="handleEdit(scope)">编辑</span>
              <span class="operation-btn" @click="openDelectBox({ ids: scope.row.pk_id })">删除</span>
            </template>
          </el-table-column>
        </comm-table>
      </div>
    </div>
    <el-dialog
      :title="title + '岗位'"
      :visible.sync="dialogVisible"
      width="50%"
      class="handle-dialog"
      :destroy-on-close="true"
      @close="dialogVisible = false"
    >
    <!-- @handleCancel="handleCancel"
        @handleConfirm="handleConfirm" -->
      <add-post
        ref="addDialog"
        :titles="title" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TabSearch from '@/components/TabSearch'
import AddPost from '../modules/addPost'
import TableCommMixin from '@/mixins/TableCommMixin'
import { getPostDetail } from '@/api/api'
export default {
  name: 'MenuManagement',
  components: {
    TabSearch,
    AddPost
  },
  mixins: [TableCommMixin],
  data() {
    return {
      title: '',
      dialogVisible: false,
      url: {
        list: '/system/api/Post',
        method: 'get',
        add: '/system/api/Post',
        addMethod: 'post',
        // 编辑
        edit: '/system/api/Post',
        editMethod: 'put',
        // 删除
        delete: '/system/api/Post',
        deleteMethod: 'delete',
        // 导出
        export: "/system/api/Post/Export"
      },
      searchData: [{
        key: 'menuName',
        title: '岗位编号 ',
        type: 'input',
        attr: {
          placeholder: '请输入'
        }
      },
      {
        key: 'date',
        title: '创建时间',
        type: 'time',
        attr: {
          placeholder: '请选择'
        }
      },
      {
        key: 'date',
        title: '岗位名称',
        type: 'input',
        attr: {
          placeholder: '请输入'
        }
      },
      {
        key: 'userStatus',
        title: '岗位状态',
        type: 'select',
        attr: {
          placeholder: '所有'
        },
        options: [{
          // value: 0,
          label: '所有'
        }, {
          value: 0,
          label: '正常'
        }, {
          value: 1,
          label: '停用'
        }]
      }],
    }
  },
  methods: {
    // 删除
    openDelectBox(param) {
      this.$confirm('此操作将此用户删除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(typeof param === "string") {
            this.handleDelete(param)
          } else {
            this.handleDeleteOne(param)
          }
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消删除'
          });
        });
    },
    // 导出
    openExportBox() {
      this.$confirm("确定导出数据至EXCEL吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.handleExport();
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消导出"
          });
        });
    },
    // 编辑之前
    beforeEdit(data) {
      return new Promise((resolve, reject) => {
        getPostDetail({pid: data.row.pk_id}).then(res => {
          if(res.code === 0) {
            if(!res.data['checkParam']) {
              res['data']['checkParam'] = {
                uniquePostCode: false,
                uniquePostName: false
              }
            }
            resolve(res.data)
          } else {
            this.$message({ type: 'error', message: res.msg });
            reject({})
          }
        })
      })
    },
    // 提交之前
    async beforeSubmit(data) {
      return new Promise(resolve => {
        let adoptValue = false;
        if(data['checkParam']) {
          if(Object.values(data['checkParam']).length) {
            Object.values(data['checkParam']).some(item => {
              if(item) {
                adoptValue = true
              }
            })
          }
        }
        if(adoptValue) {
          resolve({status: -1})
        } else {
          resolve(data)
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.system-management-container {
  margin:0 22px;
  .search-box {
    margin-top: 20px;
    background:rgba(245,247,249,1);
    border:1px solid rgba(221, 221, 221, 1);
    padding-top: 13px;
  }
}
</style>
